<template>
    <div class="demo-collapse">
        <el-collapse v-model="activeNames" @change="handleChange">
            <el-collapse-item title="问题描述" name="des">
                <div class="detail">
                    <img class="image" src="../../../../../../assets/swiper/轮播图2.png">
                    <div class="detail-text">
                        <div class="text">
                            对于网图来说，最短路径，是指两顶点之间经过的边上的权值之和最少的路径，并且我们称路径上的第一个顶点是源点，最后一个顶点是终点。
                            单源最短路径，即求图中某一个顶点到其它顶点的最短路径，可以通过经典的 Dijkstra（迪杰斯特拉）算法求解。
                        </div>
                        <el-table :data="tableData" border style="width: 99%;">
                            <el-table-column prop="name" label="名称" align="center" />
                            <el-table-column label="时间复杂度" align="center">
                            <el-table-column prop="time" label="朴素dijkstra" align="center"/>
                            <el-table-column prop="time2" label="优先队列优化" align="center"/>
                            <el-table-column prop="time3" label="二叉堆优化" align="center"/>
                            <el-table-column prop="time4" label="斐波那契堆优化" align="center"/>
                            </el-table-column>
                        </el-table>
                    </div>
                </div>
            </el-collapse-item>
            <el-collapse-item title="相关研究" name="3">
                <ul>
                    <li v-for="item in thesisData" :key="item.title">
                        <a :href="item.link" target="_blank">
                            <div class="thesis">
                                <img class="thesis-cover" src="../../../../../../icons//thesis.svg" alt="">
                                <div class="thesis-title">
                                    {{ item.title }}
                                </div>
                                <div class="thesis-author">
                                    <span>作者：</span>{{ item.author }}
                                </div>
                                <div class="thesis-time">
                                    <span>时间：</span>{{ item.time }}
                                </div>
                                <div class="thesis-source">
                                    <span>来源：</span>{{ item.source }}
                                </div>
                            </div>
                        </a>
                    </li>
                </ul>
            </el-collapse-item>
            <el-collapse-item title="应用场景" name="4">
                <div class="detail">
                    <img class="use" src="../../../../../../assets/dijkstra算法/dijkstra.png" alt="">
                    <div class="text">
                        从迪杰斯特拉的算法原理上来说，无向图是没有问题的，
                        只需要给matrix[source][target]和matrix[target][source]赋上相同的权值，因为它每次只会根据到源点的距离，
                        选取距离最近的一个节点加入，所以有没有方向都无所谓，算法只关注可达点的距离；至于有环图，
                        它对每个节点的距离计算只用了一层遍历去做，并不会陷入死循环，也不会出现重复计算的问题。
                        因此迪杰斯特拉算法是可以用在无向图和有环图中的，适合于求单源最短路径。
                        求图的最短路径在实际生活中有许多应用，比如说在你在一个景区的某个景点，
                        参观完后，要怎么走最少的路程到你想参观的下个景点，这就利用到了求图最短路径的算法。
                    </div>
                </div>
            </el-collapse-item>
        </el-collapse>
    </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
const activeNames = ref(['1'])
const handleChange = (val: string[]) => {
    console.log(val)
}

// 相关研究部分
const thesisData = [
    {
        title: "带有限制条件的最短路径算法应用案例分析",
        author: "王莹莹，杜炼",
        time: "2022年",
        source: "百度学术",
        link: "https://xueshu.baidu.com/usercenter/paper/show?paperid=183w0210k96c0080fg1v0440g9694004&site=xueshu_se",
    },
    {
        title: "求解有向必经节点最短路径问题的算法",
        author: "白彩云，李 阳，王 越，郭 爽，孙欣宇，覃昶潔",
        time: "2020年",
        source: "百度学术",
        link: "https://xueshu.baidu.com/usercenter/paper/show?paperid=1f0n0ta0ec6g0e90jv6f0g20j0271816&site=xueshu_se",
    },
    {
        title: "最短路径(Dijkstra算法)",
        author: "想写好代码的小猫头",
        time: "2022年",
        source: "CSDN",
        link: "https://blog.csdn.net/m0_63223213/article/details/126918214?ops_request_misc=&request_id=&biz_id=102&utm_term=%E6%9C%80%E7%9F%AD%E8%B7%AF%E5%BE%84&utm_medium=distribute.pc_search_result.none-task-blog-2~all~sobaiduweb~default-2-126918214.142^v99^control&spm=1018.2226.3001.4187",
    },

]

// 复杂度表格描述
const tableData = [
    {
        name: 'dijkstra算法',
        time: 'O(m+n^2)',
        time2:'O(m)',
        time3:'O((m+n)logn)',
        time4:'O(m+nlogn)'
    },
]
</script>

<style scoped lang="scss">
* {
    list-style: none;
}

.image {
    width: 290px;
    border-radius: 10px;
    margin-right: 10px;
}

a {
    text-decoration: none;
    /* 去除默认的下划线 */
    outline: none;
    /* 去除旧版浏览器的点击后的外虚线框 */
    color: #000;
    /* 去除默认的颜色和点击后变化的颜色 */
}

.detail {
    display: flex;
    justify-content: center;
    align-items: end;

    .detail-box {
        display: flex;
        flex-direction: column;
    }

    .text {
        margin-left: 10px;
        margin-bottom: 10px;
        cursor: default;
    }

    .use {
        width: 240px;
        height: 150px;
        border-radius: 10px;
    }
}

// 相关研究部分
.thesis {
    width: 98%;
    position: relative;
    left: 20px;
    margin-bottom: 10px;
    font-weight: normal;
    background: #F5F5F5;
    border-radius: 10px;
    transition: all 0.2s linear;

    .thesis-title {
        position: absolute;
        top: 0;
        left: 5px;
    }

    .thesis-author {
        position: absolute;
        top: 25px;
        left: 120px;
    }

    .thesis-time {
        position: absolute;
        top: 45px;
        left: 120px;
    }

    .thesis-source {
        position: absolute;
        top: 65px;
        left: 120px;
    }

    &:hover {
        cursor: pointer;
        transform: translateX(-15px);
    }
}
</style>